<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="" />
    <meta name="author" content="" />
    <link rel="icon" href="../img/asset-favicon.ico" />
    <title>学成在线2.0</title>
  
    <link rel="stylesheet" href="../plugins/normalize-css/normalize.css" />
    <link
  rel="stylesheet" href="../plugins/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="../css/page-learing-article-comment.css" />
</head>
  <body data-spy="scroll" data-target="#articleNavbar" data-offset="150">
    <div id="container">
      <!-- 页面头部 -->
      <!--头部导航-->
<header>
  <div id="headerContainer" class="learingHeader">
    <nav class="navbar">
      <div class="">
        <div class="logo">
          <img src="../img/asset-logoIco.png" width="100%" alt="" />
        </div>
        <div class="nav-list">
          <ul class="nav navbar-nav">
            <!-- TODO: 显示选中状态 -->
            <li class="active">
              <a
                :href="portal_url + '/pages/learing-index.html'"
                target="_blank"
                >首页</a
              >
            </li>
            <li>
              <a :href="portal_url + '/pages/learing-list.html'" target="_blank"
                >课程</a
              >
            </li>
            <li><a href="#">职业规划</a></li>
            <li></li>
          </ul>
        </div>

        <!-- 未登录 -->
        <div class="sign-in" v-if="!userName">
          <a :href="manage_url + '/#/login?isRegnew=0'">登录</a>
          <span>&nbsp;|&nbsp;</span>
          <a :href="manage_url + '/#/login?isRegnew=1'">注册</a>
        </div>
        <!-- 已登录 -->
        <div class="sign-in" v-else>
          <a :href="manage_url + '/#/personal/my-course'" class="personal">
            个人中心
          </a>
          <a :href="manage_url + '/#/organization/company'" class="personal">
            管理
          </a>
          /
          <div class="dropdown">
            <span class="dropbtn">入驻</span>
            <div class="dropdown-content">
              <a :href="manage_url + '/#/entering/company-entering'"
                >机构入驻</a
              >
              <a :href="manage_url + '/#/entering/personal-entering'"
                >个人入驻</a
              >
            </div>
          </div>
          <div class="personal">
            <span class="personalIco"></span>
          </div>
          <div class="dropdown myInfo">
            <div class="dropbtn">
              <img src="../img/asset-myImg.jpg" alt />
              <span v-text="userName"></span>
            </div>
            <div class="dropdown-content">
              <a href="javascript:;" @click="handleLogout">退出登录</a>
            </div>
          </div>
        </div>
        <div class="starch">
          <input
            type="text"
            id="inputSearch"
            class="input-search"
            placeholder="输入查询关键词"
          /><input id="btnQuery" type="submit" class="search-buttom" />
        </div>
      </div>
    </nav>
  </div>
</header>

      <!-- TODO: 需要获取课程数据渲染 -->
      <!-- 课程信息 -->
<div class="article-banner">
  <div class="banner-bg"></div>
  <div class="banner-info">
    <div class="banner-left">
      <input type="hidden" name="coursePubId" value="62" />
      <input type="hidden" name="courseId" value="96" />
      <p>课程 <span>\ 编程入门</span></p>
      <p class="tit">程序语言设计</p>
      <p class="pic">
        <span class="new-pic">特惠价格￥999</span>
        <span class="old-pic">原价￥1999</span>
      </p>
      <p class="info">
        <a :href="courseProgress.url" v-text="courseProgress.text"></a>
        <span><em>难度等级</em>中级</span>
        <span><em>课程时长</em>2小时27分</span>
        <span><em>评分</em>{{ starRank }}分</span>
        <span><em>授课模式</em>录播</span>
      </p>
    </div>
    <div class="banner-rit">
      <p><img src="../img/widget-video.png" alt="" /></p>
      <p class="vid-act">
        <span> <i class="i-heart"></i>收藏 23 </span>
        <span>分享 <i class="i-weixin"></i><i class="i-qq"></i></span>
      </p>
    </div>
  </div>
</div>

      <div class="article-cont">
    <div class="article-left-box">
        <div class="comment-box">
            <transition name="evaluate">
                <div class="evaluate" v-show="!hasEvaluated">
                    <div class="eva-top"> <div class="tit">课程评分 </div><div class="star"><div class="score"><i v-text="comment.starRank"></i></div></div><span class="star-score"> <i v-text="comment.starRank"></i> 分</span></div>
                    <div class="eva-cont">
                        <div class="tit">学员评语 </div>
                        <div class="text-box">
                            <textarea class="form-control" rows="5" placeholder="扯淡、吐槽、表扬、鼓励......想说啥说啥！" v-model="comment.commentText"></textarea>
                            <div class="text-right" @click="handleSubmitCourseComment"><span>发表评论</span></div>
                        </div>
                    </div>
                </div>
            </transition>
            <div class="course-evaluate">
                <div class="top-tit">评论
                    <span>
                        <label><input name="eval" type="radio" value="" checked /> 所有学生 </label>
                        <label><input name="eval" type="radio" value="" /> 完成者 </label>
                    </span>
                </div>
                <div class="top-cont">
                    <div class="cont-top-left">
                        <div class="star-scor"><div class="star-show"><div class="score"><i>5</i></div></div><div class="scor" v-text="commentStatistics.starRank + '分'"></div></div>
                        <div class="all-scor" v-text="'总评数：' + commentStatistics.totalCommentNums"></div>
                    </div>
                    <div class="cont-top-right">
                        <div class="star-grade">五星 <div class="grade"><div class="grade-percent"><span></span></div><div class="percent-num"><i v-text="(commentStatistics.starRank5Nums * 100 / commentStatistics.totalCommentNums).toFixed(2)"></i>%</div></div></div>
                        <div class="star-grade">四星 <div class="grade"><div class="grade-percent"><span></span></div><div class="percent-num"><i v-text="(commentStatistics.starRank4Nums * 100 / commentStatistics.totalCommentNums).toFixed(2)"></i>%</div></div></div>
                        <div class="star-grade">三星 <div class="grade"><div class="grade-percent"><span></span></div><div class="percent-num"><i v-text="(commentStatistics.starRank3Nums * 100 / commentStatistics.totalCommentNums).toFixed(2)"></i>%</div></div></div>
                        <div class="star-grade">二星 <div class="grade"><div class="grade-percent"><span></span></div><div class="percent-num"><i v-text="(commentStatistics.starRank2Nums * 100 / commentStatistics.totalCommentNums).toFixed(2)"></i>%</div></div></div>
                        <div class="star-grade">一星 <div class="grade"><div class="grade-percent"><span></span></div><div class="percent-num"><i v-text="(commentStatistics.starRank1Nums * 100 / commentStatistics.totalCommentNums).toFixed(2)"></i>%</div></div></div>
                    </div>
                </div>
                <!-- TODO: 老师回复学生的评论 -->
                <div class="comment-item-box">
                    <div class="title">评论 <span v-text="courseCommentCounts + '条评论'"></span></div>
                    <div class="item" v-for="item in courseComments">
                        <div class="item-left">
                            <p><img src="../img/widget-pic.png" width="60px" alt=""></p>
                            <p v-text="item.nickName"></p>
                        </div>
                        <div class="item-cent">
                            <p v-text="item.commentText"></p>
                            <p class="time" v-text="item.commentDate.substring(0, 10)"></p>
                        </div>
                        <div class="item-rit">
                             <p><div class="star-show"><div class="score"><i>4</i></div></div></p>
                             <p>评分 <span v-text="item.starRank + '星'"></span></p>
                        </div>
                    </div>
                    <div class="get-more">页面加载中...</div>
                </div>
            </div>
        </div>
    </div>
    <div class="article-right-box">
        <div class="about-teach">
            <div class="teach-info">
                <img src="../img/widget-pic.png" width="90px" alt="">
                <div>
                    <p>教学方：<span>毛老师</span></p>
                    <p class="about">高级前端开发工程师10年开发经验</p>
                </div>
            </div>
            <p><a href="#" class="">TA的课程</a></p>
            <p class="synopsis">JavaEE开发与教学多年，精通JavaEE技术体系，对流行框架JQuery、DWR、Struts1/2，Hibernate，Spring，MyBatis、JBPM、Lucene等有深入研究。授课逻辑严谨，条理清晰，注重学生独立解决问题的能力。</p>
        </div>
        <div class="learing-box">
            <div class="tit">看过该课的同学也在看</div>
            <div class="item-box">
                <div class="item-top">
                    <p class="top-tit">前端小白入门</p>
                    <p class="top-lab">Web前端攻城狮培养计划</p>
                    <p class="top-num">2589646次播放<span>4.8分</span></p>
                </div>
                <div class="item-list">
                    <a>Linux 达人养成记</a>
                    <a>Java消息中间件</a>
                    <a>Hibernate Validator</a>
                    <a>ASP.NET-MVC网站开发</a>
                    <a>Android架构模式详解之MVC…</a>
                    <a>Linux 达人养成记</a>
                    <a>Java消息中间件</a>
                    <a>Hibernate Validator</a>
                    <a>ASP.NET-MVC网站开发</a>
                </div>
            </div>
        </div>
    </div>
</div>
    </div>
    <!-- 页面底部 -->
    <!--底部版权-->
<footer>
  <div class="container">
    <div class="row">
      <div class="col-md-7">
        <div>
          <!--<h1 style="display: inline-block">学成网</h1>--><img
            src="../img/asset-logoIco.png"
            alt=""
          />
        </div>
        <div>
          学成网致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。
        </div>
        <div>© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</div>
        <input type="button" class="btn btn-primary" value="下 载" />
      </div>
      <div class="col-md-5 row">
        <dl class="col-md-4">
          <dt>关于学成网</dt>
          <dd>关于</dd>
          <dd>管理团队</dd>
          <dd>工作机会</dd>
          <dd>客户服务</dd>
          <dd>帮助</dd>
        </dl>
        <dl class="col-md-4">
          <dt>新手指南</dt>
          <dd>如何注册</dd>
          <dd>如何选课</dd>
          <dd>如何拿到毕业证</dd>
          <dd>学分是什么</dd>
          <dd>考试未通过怎么办</dd>
        </dl>
        <dl class="col-md-4">
          <dt>合作伙伴</dt>
          <dd>合作机构</dd>
          <dd>合作导师</dd>
        </dl>
      </div>
    </div>
  </div>
</footer>

    <!-- 页面 css js -->
  
<script
  type="text/javascript" src="../plugins/jquery/dist/jquery.js"></script>
<script
  type="text/javascript" src="../plugins/bootstrap/dist/js/bootstrap.js"></script>
<script
  type="text/javascript" src="../plugins/jscookie/js.cookie.js"></script>
<script type="text/javascript" src="../plugins/vue/vue.js"></script>
<script type="text/javascript" src="../js/util-env.js"></script>
<script type="text/javascript" src="../js/util-request-ajax.js"></script>
<script type="text/javascript" src="../js/util-api.js"></script>
<script type="text/javascript" src="../js/widget-header.js"></script>
<script type="text/javascript" src="../js/widget-header_vue.js"></script>
<script type="text/javascript" src="../js/widget-learing-article-banner.js"></script>
<script>
    $(function(){
        //评分
        $('.star .score').map(function(n,i){
            var x = Number($(this).find('i').text());
            var w = 109 * (1 - x / 5);
            $(this).css('width',w+'px');
        })
        //评论打分
        // $('.evaluate .star').mousemove(function(e){
        //     var startX = $(this).offset().left;
        //     var movX = e.clientX - startX + 0.5;
        //     var w = 145 * (1 - movX / 145);
        //     $(this).find('.score').css('width',w+'px');
        //     $('.star-score i').text((movX / 145 * 5).toFixed(1))
        // })
        //星级评分
        $('.grade').map(function(n,i){
            var pret = $(this).find('.percent-num i').text();
            var wt = $(this).find('.grade-percent').width();
            $(this).find('.grade-percent span').css('width',wt * pret/100);
        })
    })
</script>
<script src="../js/page-learing-article-comment.js"></script>
</body>
</html>
